<!--
 * Copyright 2014 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<html>
<head>
<title>Automation Tests - Attributes</title>
</head>
<body>
  <!-- activedescendant attribute, owns default attribute-->
  <input type="text" aria-activedescendant="opt6" aria-readonly="true"
         aria-autocomplete="list" role="combobox"
         id="combobox-edit">
  <ul aria-expanded="true" role="listbox" id="combobox-list">
    <li role="option" id="opt1">Alabama</li>
    <li role="option" id="opt2">Alaska</li>
    <li role="option" id="opt3">American Samoa</li>
    <li role="option" id="opt4">Arizona</li>
    <li role="option" id="opt5">Arkansas</li>
    <li role="option" id="opt6">California</li>
    <li role="option" id="opt7">Colorado</li>
  </ul>

  <!-- link attributes -->
  <a href="about://blank" id="real-link">Real link</a>
  <div role="link" id="link-role">ARIA link</div>

  <!-- editable text attributes -->
  <input type="text" value="Text input" aria-label="text-input" id="text-input"></input>
  <textarea aria-label="textarea">Textarea</textarea>
  <div tabindex="0" contenteditable role="textbox" aria-label="textbox-role">
    Textbox
  </div>

  <script>
    document.querySelector('#text-input').setSelectionRange(2, 8);
    document.querySelector('textarea').setSelectionRange(2, 4);
  </script>

  <!-- range attributes -->
  <input type="range" aria-label="range-input" max="5" value="4"></input>
  <div tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="10"
       aria-valuenow="7" aria-valuetext="seven stars"
       aria-label="slider-role"></div>
  <div tabindex="0" role="spinbutton" aria-valuemin="1" aria-valuemax="31"
       aria-valuenow="14" id="spinbutton-role"></div>
  <div tabindex="0" role="progressbar" aria-valuemin="0" aria-valuenow="0.9"
       aria-valuemax="1.0" aria-label="progressbar-role"></div>
  <div tabindex="0" role="progressbar" aria-valuenow="0.05"></div>
  <div tabindex="0" role="scrollbar" aria-valuemin="0" aria-valuenow="0"
       aria-valuemax="1.0" aria-orientation="vertical" aria-controls="main"
       id="scrollbar-role"></div>

  <div id="main" role="group" aria-label="main">Content for scrollbar to control</div>

  <!-- table and cell attributes -->
  <!-- The first 100 rows and the first 50 columns are missing. -->
  <table id="table" role="grid" aria-rowcount="103" aria-colcount="53">
    <tr role="row">
      <td role="cell" aria-rowindex="101" aria-colindex="51">Cell spanning one column</td>
      <td role="cell" aria-rowindex="101" aria-colindex="52">Cell spanning one column</td>
      <td role="cell" aria-rowindex="101" aria-colindex="53">Cell spanning one column</td>
    <tr role="row">
      <td colspan="2" role="cell" aria-rowindex="102" aria-colindex="51">Cell spanning two columns</td>
      <td rowspan="2" role="cell" aria-rowindex="102" aria-colindex="53">Cell spanning two rows</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="103" aria-colindex="51">Cell spanning one column</td>
      <td role="cell" aria-rowindex="103" aria-colindex="52">Cell spanning one column</td>
    </tr>
  </table>

  <p id="Spanish" lang="es-ES">Hola</p>

  <!-- checked attribute -->
  <div id="check-test-1" aria-label="check-test-1" role="checkbox" aria-checked="true">Checked</div>
  <div id="check-test-2" aria-label="check-test-2" role="checkbox" aria-checked="false">Unchecked</div>
  <div id="check-test-3" aria-label="check-test-3" role="checkbox" aria-checked="mixed">Mixed</div>
  <div id="check-test-4" aria-label="check-test-4" role="group" aria-checked="true">Not a checkbox</div>
  <div id="check-test-5" aria-label="check-test-5" role="treeitem" aria-checked="true">Checked treeitem</div>
  <div id="check-test-6" aria-label="check-test-6" role="button" aria-pressed="true">Pressed button</div>

  <!-- htmlTag attribute -->
  <figure>Go figure!</figure>

  <!-- isImage attribute -->
  <img src="" /></img>

</body>
</html>
